import React from "react";
import { Carousel, Grid, NavBar } from "antd-mobile";
import { navigate } from "gatsby"

const appData = [
  {
    icon: "../images/home/nav1.png",
    text: '巡查',
    url: '/inspection/task-list/'
  },
  {
    icon: "../images/home/nav2.png",
    text: '巡查记录',
    url: '/binding/device-list/'
  },
  {
    icon: "../images/home/nav3.png",
    text: '报表',
    url: '/binding/add/'
  }
]
const solutionData = [
  {
    icon: "../images/home/nav4.png",
    text: '火警主机',
    url: '/inspection/task-list/'
  },
  {
    icon: "../images/home/nav5.png",
    text: '水压监测',
    url: '/inspection/task-list/'
  },
  {
    icon: "../images/home/nav6.png",
    text: '电气火灾',
    url: '/inspection/task-list/'
  }
]
const sliderData = ["../images/slider/slider1.jpg","../images/slider/slider2.jpg","../images/slider/slider3.jpg","../images/slider/slider4.jpg","../images/slider/slider5.jpg"]
const solutionSlider = ["../images/solution/solution1.jpg","../images/solution/solution2.jpg","../images/solution/solution3.jpg","../images/solution/solution4.jpg"]


class Home extends React.Component {
  state = {
    imgHeight: 176
  };
  componentDidMount() {
  }
  render() {
    return (
      <div>
        <NavBar
          mode="light"
        >
          首页
        </NavBar>
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) =>
            console.log(`slide from ${from} to ${to}`)
          }
          afterChange={index => console.log("slide to", index)}
        >
          {sliderData.map(val => (
            <button
              key={val}
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight
              }}
            >
              <img
                src={`${val}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </button>
          ))}
        </Carousel>
        <p className="title">智能维保</p>
        <Grid data={appData}
          columnNum={3}
          hasLine={false}
          onClick={_el => navigate(_el.url, { state: { url: '/' } })}
          renderItem={dataItem => (
            <div>
              <img src={dataItem.icon} style={{ width: '4.4rem', height: '4.4rem' }} alt="" />
              <div style={{ color: '#666', fontSize: '1.4rem', marginTop: '12px' }}>
                <span>{dataItem.text}</span>
              </div>
            </div>
          )}
        />
        <p className="title">万物互联</p>
        <Grid data={solutionData}
          columnNum={3}
          hasLine={false}
          onClick={_el => navigate(_el.url, { state: { url: '/' } })}
          renderItem={dataItem => (
            <div>
              <img src={dataItem.icon} style={{ width: '4.4rem', height: '4.4rem' }} alt="" />
              <div style={{ color: '#666', fontSize: '1.4rem', marginTop: '12px' }}>
                <span>{dataItem.text}</span>
              </div>
            </div>
          )}
        />
        <style jsx="true">{`
          .title {
            margin: 0;
            line-height: 30px;
            padding-left: 10px;
          }
        `}</style>
        <div>
          <Carousel
            className="space-carousel"
            frameOverflow="visible"
            cellSpacing={10}
            slideWidth={0.8}
            autoplay
            infinite
            beforeChange={(from, to) =>
              console.log(`slide from ${from} to ${to}`)
            }
            afterChange={index => this.setState({ slideIndex: index })}
          >
            {solutionSlider.map((val, index) => (
              <button
                key={val}
                style={{
                  display: "block",
                  position: "relative",
                  top: this.state.slideIndex === index ? -10 : 0,
                  height: this.state.imgHeight,
                  boxShadow: "2px 1px 1px rgba(0, 0, 0, 0.2)"
                }}
              >
                <img
                  src={`${val}`}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </button>
            ))}
          </Carousel>
          <style jsx="true">{`
            .space-carousel {
              padding: 16px;
              overflow: hidden;
            }
          `}</style>
        </div>
      </div>
    );
  }
}

export default Home;
